<template>
	<base-loading-box
		class="min-h-[200px]"
		:isEmpty="isEmpty"
		:loading="loading"
		:error="error"
		:emptyImg="emptyImg"
		@reload="emits('reload')">
		<slot></slot>
		<base-more
			v-if="!isEmpty"
			:auto="auto"
			:loading="loading"
			:isFinish="isFinish"
			:error="!!error"
			:moreText="moreText"
			@load="emits('load')" />
	</base-loading-box>
</template>

<script lang="ts" setup>
import BaseLoadingBox from '../loading-box/index.vue'
import BaseMore from '../more/index.vue'

defineProps({
	auto: {
		type: Boolean,
		default: true
	},
	loading: {
		type: Boolean,
		required: true
	},
	isFinish: {
		type: Boolean,
		default: false
	},
	isEmpty: {
		type: Boolean,
		default: false
	},
	error: {
		type: Object,
		default: null
	},
	moreText: {
		type: String,
		default: ''
	},
	emptyImg: {
		type: String
	}
})

const emits = defineEmits(['load', 'reload'])
</script>
